<template>
	<div class="pageContent">
		<div class="menberConTitle flex" style="justify-content: space-between;">
			<div class="tableTitle">装备分类列表</div>
			<!-- <div> -->
			<el-button round size="mini" type="primary" @click="addClassfiy">新增分类</el-button>
			<!-- </div> -->
		</div>
		<el-table :data="pageData.items" style="width: 100%;" highlight-current-row ref="singleTable"  @row-click="rowClick">
			<el-table-column prop="equipmentTypeName" label="装备分类"></el-table-column>
			<el-table-column prop="numberEquipment" label="装备数量"></el-table-column>
			<el-table-column prop="usedEquipment" label="已使用"></el-table-column>
			<el-table-column prop="unusedEquipment" label="未使用"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" size=" " class="isdelete" @click="deleteRow(scope.row)">删除</el-button>
					<el-button type="text" size=" " @click="toTop(scope.row)">置顶</el-button>
					<el-button type="text" size=" " @click="addEquipment(scope.row)">新增装备</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
		<!-- 添加分类 -->
		<el-dialog title="添加分类" :visible.sync="addPostDialog" width="60rem">
		  <div class="addTagDialog">
			  <el-form :model="addPostForm" class="demo-form-inline" label-width="10rem">
				  <el-form-item label="分类" v-if="addPostForm.isPostId">
					  <div class="flex" style="justify-content: space-between;width: 290px;">
						  <el-select v-model="addPostForm.equipmentTypeId" placeholder="选择分类" style="">
						    <el-option v-for="item in dialogData" :label="item.equipmentTypeName" :value="item.id"></el-option>
						  </el-select>
						  <el-button icon="el-icon-edit" type="text" style="margin-left: 10px;" @click="addPostForm.isPostId = false">自定义分类</el-button>
					  </div>
				  </el-form-item>
			    <el-form-item label="自定义" v-else>
					<div class="flex" style="justify-content: space-between;width: 290px;">
						<el-input v-model="addPostForm.equipmentTypeName" placeholder="自定义分类"></el-input>
						<el-button type="text" style="margin-left: 10px;" @click="addPostForm.isPostId = true">取消自定义</el-button>
					</div>
			    </el-form-item>
			   
			  </el-form>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addPostDialog = false">取 消</el-button>
		    <el-button type="primary" @click="submitAddPost">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pageData: '',
				queryData: {
					companyId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
				addPostDialog: false ,// 新增
				dialogData: '',
				addPostForm:{
					companyId: '',
					isPostId: true,
					equipmentTypeName: '',
					equipmentTypeId: ''
				}
			}
		},
		mounted() {
			this.addPostForm.companyId = this.queryData.companyId = this.$store.state.company.selectCompanyId?this.$store.state.company.selectCompanyId:this.$store.state.company.companyId
			this.getPageData()
		},
		watch:{
			addPostDialog(newData){
				if(!newData){
					this.addPostForm.isPostId = true
					this.addPostForm.equipmentTypeName = ''
					this.addPostForm.equipmentTypeId = ''
				}
			}
		},
		methods: {
			rowClick(row) {
				// 当鼠标点击某一行时
				// console.log(row)
				this.$refs.singleTable.setCurrentRow(row);
				this.$parent.$refs.equipmentDetail.$data.queryData.equipmentRelationId = row.equipmentRelationId
				this.$parent.$refs.equipmentDetail.getPageData()
				// console.log(this.$parent.$refs.serviceConfig.getPageData())
			},
			getPageData() {
				// 获取装备分类列表
				this.$request.postForm(this.$api.getCompanyEquipmentType, this.queryData).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						if(this.pageData.items.length > 0){
							this.rowClick(this.pageData.items[0])
						}
					}
				})
			},
			paginaClick(val) {
				this.queryData.page = val
				this.getPageData()
			},
			deleteRow(row) {
				this.$confirm('确认删除该类型?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.deleteEquipmentType, {
						companyId: this.queryData.companyId,
						equipmentTypeId: row.equipmentTypeId
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('删除成功')
							if(this.queryData.page > 1){
								this.queryData.page = Math.ceil((this.pageData.totalNum - 1) / $globalData.pageSize)
							}
							this.getPageData()
						}
					})
				})
			},
			toTop(row) {
				this.$request.postForm(this.$api.topEquipmentType, {
					companyId: this.queryData.companyId,
					equipmentTypeId: row.equipmentTypeId
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('操作成功')
						this.getPageData()
					}
				})
			},
			addClassfiy(){
				// 新增分类
				this.addPostDialog = true
				this.$request.postForm(this.$api.getAllEquipmentType, {
					filterCondition: '',
					page: 1,
					pageSize: 20000
				}).then(res => {
					if (res.code == 200) {
						this.dialogData = res.data.items
					}
				})
			},
			submitAddPost(){
				// 确定添加
				if(this.addPostForm.isPostId && this.addPostForm.equipmentTypeId == ''){
					this.$message.error('请选择分类类型')
					return
				} else if(!this.addPostForm.isPostId && this.addPostForm.equipmentTypeName == ''){
					this.$message.error('请输入分类类型')
					return
				} else {
					this.$request.postForm(this.$api.addEquipmentType, this.addPostForm).then(res => {
						if (res.code == 200) {
							this.$message.success('新增成功')
							this.addPostDialog = false
							this.queryData.page = 1
							this.getPageData()
						}
					})
				}
				
			},
			addEquipment(row){
				// 新增装备
				// console.log(row)
				this.$router.push(`/industrialist/working/equipmenteditor/${row.equipmentRelationId}`)
			}
		}
	}
</script>

<style scoped="scoped">
	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.pageContent>>>.isdelete {
		color: #F42929;
	}
</style>
